<template>
    <div class="Nearby">
        <header class="nearby-header">
            <div class="left-info">
                <i class="add-icon"></i>
                <span class="add-name">{{new_dizhi}}</span>
                <span class="add-r"> </span>
            </div>
            <div class="right-info" style="color:#565656;">
                <form  @submit.prevent="search_Cl"><input type="search" class="text-input" placeholder="请输入搜索内容" style="color:#565656;" v-model="search"></form>
                <i class="searth-icon" @click="search_Cl"></i>
            </div>
        </header>
        <div class="nearby-content">
            <ul class="nav-ul daohang" v-show="false">
                <li class="list-li red" @click="bian(4)"> 享美食<i class="icon ds"></i></li>
                <li class="list-li" @click="bian(3)">惠生活<i class="icon"></i></li>
                <li class="list-li" @click="bian(2)">爱玩乐<i class="icon"></i></li>
                <li class="list-li" @click="bian(1)">住酒店<i class="icon"></i></li>
                <li class="list-li" @click="bian(0)">全部<i class="icon"></i></li>
            </ul>
            <div class="receive" v-show="false">
                <p class="title">已经领取的券可以在这里查看{{msg}}</p>
                <img src="../../../assets/personal/images/receive-img.png" alt="">
            </div>
            <div class="sousuo_btn">
                <button :class="{btn_xuanzhong:Clickonthe_shops}" @click="options(2)">店铺</button>
                <button :class="{btn_xuanzhong:Clickonthe_goods}" @click="options(1)">商品</button>
                
            </div>
            <div>

                <!--:v-for="item in msg" data-price="item.price" :data-id="item.id"-->
                <div class="tab-content-in new_style" v-show="false">
                    <div class="same-box new_style_1">
                        <div class="left-info"><img src="../../../assets/personal/images/wdm-pic.png" alt=""></div>
                        <div class="center-info">
                            <p class="title">味多美面包坊{{msg}}</p>
                            <div class="star-group">
                                <i class="icon"></i><i class="icon"></i><i class="icon"></i><i class="icon"></i><i class="icon"></i>
                            </div>
                            <div class="card-info">
                                <strong>8</strong>
                                <span class="text">元代金券</span>
                                <span class="text1">满35元可用</span>
                            </div>
                            <p class="bottom-text">味多美（慈云寺店）</p>
                        </div>
                        <div class="right-info">
                            <button class="btn">立即领取</button>
                            <div class="add-info">
                                <i class="icon"></i>
                                <span>200m</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="shops-content" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="1">
                    <div class="shops-same-info" v-for="(item,i) in shopsList" :key="'company'+i">
                        <router-link :to="{name:'Commodity',query:{id:item.company.companyId}}">
                            <div class="top-info">
                                <div class="img-info">
                                    <img :src=item.company.headimgurl alt="">
                                </div>
                                <div class="text-content">
                                    <p class="shops-title">{{item.company.companyName}}</p>
                                    <div class="shops-add">
                                        <span class="text1"><i class="icon" style="margin-right:5px;"></i>{{item.company.address}}</span>
                                        <span class="text2" v-if="item.sign=='1kmdown'">| 距您{{item.distance}}米</span>
                                        <span class="text2" v-else>| 距您{{item.distance}}公里</span>
                                        <div class="clix"></div>
                                    </div>
                                </div>
                            </div>
                        </router-link>
                        <div class="center-info">
                            <router-link v-for="imgurl in item.goodsList" :key="imgurl.goodsId" :to="{name:'Commodity_details',query:{id:imgurl.goodsId,subid:0}}">
                                <img :src=imgurl.goodsThum alt="" :onerror="defaultImg">
                            </router-link>
                        </div>
                        <div class="bottom-info" v-for="coupons in item.coupons" :key="coupons.id" v-if="item.coupons.length>0">
                            <div class="jian">减</div>
                            <span class="txt">满{{coupons.reach1 | amountMin100(0)}}减{{coupons.score1 | amountMin100(0)}}</span>
                        </div>
                        <div class="bottom-info" v-for="coupons in item.coupons" :key="coupons.id" v-else>

                        </div>
                    </div>
                    <loadingtmp :busy="busy" :datalength="shopsList.length" :loadall="loadall" style="padding-bottom: 57px;"></loadingtmp>
                </div>
            </div>
        </div>
        <navFooter :pageName="pageName"></navFooter>
    </div>
</template>

<style scoped>
    @import "../../../assets/personal/css/nearby.css";

    .sousuo_btn button {
        border: none;
        background: #ffffff;
        width: 40%;
        margin: 0 4%;
    }

    .btn_xuanzhong {
        border-bottom: 2px solid red !important;
    }

    .searth-icon {
        margin-left: 10px;
    }

    .new_style, .new_style_1 {
        width: 100%;
        position: relative;
        display: flex;
        overflow: hidden;
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .new_style_1 {
        width: 100%;
        position: relative;
        display: flex;
        overflow: hidden;
        padding-top: 15px;
        padding-bottom: 15px;
        border-bottom: 1px solid #e5e5e5
    }

    .red {
        color: red !important;
    }

    .list-li:link {
        color: red;
    }

    .ds {
        display: block !important;
    }

    .shops-content {
        width: 100%;
        height: 600px;
        overflow: scroll;
        background: #ffffff;
        margin-top: 0.5rem;
    }

    .shops-same-info {
        width: 94%;
        overflow: hidden;
        border-bottom: 1px solid #e5e5e5;
        margin: 0 auto;
        padding-bottom: 0.5rem;
    }

        .shops-same-info .top-info {
            display: flex;
            width: 100%;
            overflow: hidden;
            margin-top: 1rem;
        }

            .shops-same-info .top-info .img-info {
                width: 3rem;
                height: 3rem;
                border: 1px solid #e5e5e5;
                border-radius: 5px;
                margin-right: 0.5rem;
            }

                .shops-same-info .top-info .img-info img {
                    display: block;
                    width: 100%;
                    height: 100%;
                }

            .shops-same-info .top-info .text-content {
                width: 80%;
            }

                .shops-same-info .top-info .text-content .shops-title {
                    text-align: left;
                    color: #000000;
                    font-size: 0.85rem;
                }

                .shops-same-info .top-info .text-content .shops-add {
                    text-align: left;
                    margin-top: 0.25rem;
                    color: #999999;
                }

                    .shops-same-info .top-info .text-content .shops-add .icon {
                        background: url("../../../assets/personal/images/add-icons2.png") no-repeat center center;
                        background-size: 100%;
                        display: inline-block;
                        height: 0.75rem;
                        width: 0.5rem;
                        position: relative;
                        top: 0.1rem;
                    }

    .text1 {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 15px;
        display: block;
    }

    .clix {
        clear: both;
    }

    .text1 {
        display: block;
        width: 180px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        float: left;
    }

    .shops-same-info .top-info .text-content .shops-add .text1 {
        color: #333333;
        margin-right: 0.5rem;
        font-size: 12px;
    }

    .shops-same-info .top-info .text-content .shops-add .text2 {
        color: #999999;
        margin-left: 0.5rem;
        font-size: 12px;
    }

    .shops-same-info .center-info {
        width: 100%;
        clear: both;
        display: flex;
        flex-wrap: wrap;
        margin-top: 0.5rem;
        overflow: hidden;
        overflow-x: scroll;
        height: 4.25rem;
    }

        .shops-same-info .center-info a {
            display: inline-block;
            width: 25%;
            height: 4.25rem;
            max-width: 4.25rem;
            margin: 1%;
        }

        .shops-same-info .center-info img {
            display: inline-block;
            width: 100%;
            height: 100%;
        }

    .shops-same-info .bottom-info {
        width: 100%;
        text-align: left;
        display: flex;
        margin-top: 0.5rem;
    }

        .shops-same-info .bottom-info .jian {
            width: 1rem;
            height: 1rem;
            background: #ff0808;
            color: #ffffff;
            text-align: center;
            line-height: 1rem;
            font-size: 0.75rem;
            border-radius: 5px;
            margin-right: 0.25rem;
        }

        .shops-same-info .bottom-info .txt {
            color: #ff0808;
            font-size: 0.75rem;
        }
</style>
<script>
   // import wx from 'weixin-js-sdk'
    import navFooter from '@/components/footer'
    import loadingtmp from '@/components/load/loading'
    export default {
        data() {
            return {
                msg: null,
                pageName: "nearby",
                latitude: '39.914907',   //纬度
                longitude: '116.501942',    //经度
                new_dizhi: '',
                shopsList: [],
                defaultImg: 'this.src="' + require('../../../assets/image_bg_url.png') + '"',
                page: 1,
                pageSize: 5,
                busy: false,
                loadall: false,
                search: '',
                Clickonthe_goods: false,
                Clickonthe_shops: true,
                Seach_type: 2  //商品 1   2商店
            }
        },
        components: {
            navFooter,
            loadingtmp
        },
        created() {
            this.getwxconfig();
        },
        mounted() {
            this.clic();

        },
        methods: {
            options: function (type) {//搜索类型
                this.Seach_type = type
                if (1 == this.Seach_type) {//商品
                    console.log("商品")
                    this.page = 1
                    this.shopsList=[]
                    this.Clickonthe_goods = true;
                    this.Clickonthe_shops = false;
                    this.loadMore()
                } else {
                    console.log("店铺")
                    this.page = 1
                    this.shopsList=[]
                    this.Clickonthe_shops = true;
                    this.Clickonthe_goods = false;
                    this.loadMore()
                }
            },
            getwxconfig() {
                var vm = this;
                this.$http.get(this.APIURL_PREFIX + "/api/wxs/config?url=" + escape(location.href.split('#')[0])).then((response) => {
                    console.log(response.data);
                    var appid = 'wx488ae3f57360b7ea';
                    wx.config({
                        debug: false,
                        appId: appid,
                        timestamp: response.data.data.timestamp,
                        nonceStr: response.data.data.noncestr,
                        signature: response.data.data.signature,
                        jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone', 'scanQRCode', 'getLocation']
                    });
                    wx.ready(function () {
                        wx.getLocation({
                            type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
                            success: function (res) {
                                var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
                                var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
                                vm.latitude = latitude;
                                vm.longitude = longitude;
                                console.log("微信经度", vm.latitude)
                                console.log("微信纬度", vm.longitude);
                                vm.map();
                                vm.busy = false;
                                vm.loadall = false;
                                vm.page = 1;
                                vm.loadMore();
                            }
                        });
                    })
                })
            },
            map() {
                var vm = this
                var geocoder = new qq.maps.Geocoder({
                    complete: function (result) {   //解析成功的回调函数
                        var address_street = result.detail.addressComponents.street
                        var address_streetNumber = result.detail.addressComponents.streetNumber
                        var address_town = result.detail.addressComponents.town
                        vm.new_dizhi = address_town + address_streetNumber;
                        console.log("微信城市", vm.new_dizhi);
                    }
                });
                geocoder.getAddress(new qq.maps.LatLng(this.latitude, this.longitude))

            },
            log(flag,type) {
                var api;
                var params={}
                params.page=this.page;
                params.rows=this.rows;
                params.longitude=this.longitude;
                params.latitude=this.latitude;
                if (1==this.Seach_type) {//判断接口类型
                    console.log("进来了")
                    api="/api/wap/searchCompanyByNear";
                    if(""!=this.search){
                      params.searchName=this.search
                    }
                } else {
                    console.log("这是店铺")
                     api="/api/wap/company/nearBy";
                    if(""!=this.search){
                      params.companyName=this.search
                    }
                }
                this.$http.get(this.APIURL_PREFIX +api , {params}).then((response) => {
                    console.log(flag);
                    if (flag) {
                        this.shopsList = this.shopsList.concat(response.data.data);
                    } else {
                        this.shopsList = response.data.data;
                    }
                    if (0 == response.data.data.length || response.data.data.length < this.pageSize) {
                        this.busy = true;
                        this.loadall = true;
                    }
                    else {
                        this.busy = false;
                        this.page++
                    }
                }).catch(function (err) {
                    console.log(err)
                });
            },
            loadMore() {
                this.busy = true;
                setTimeout(() => {
                    this.log(this.page > 1);
                }, 500);
            },
            bian: (function (id) {
                console.log(id)
                this.msg = id
                //collection_type拼接
            }),
            search_Cl: function () {
                this.page = 1,
                console.log(this.search)
                this.shopsList = []
                this.log(this.page > 1);
                this.loadMore();
            },
            clic() {
                $(".list-li").click(function () {
                    $(this).addClass("red").siblings().removeClass("red");
                    $(this).children("i").addClass("ds").parent().siblings().children("i").removeClass("ds");
                })
            }
        },
         activated(){//本地
            //   alert(this.$route.meta.isUseCache+"123")
                // console.log(this.$route.meta.isUseCache+"123456")

                
                if(!this.$route.meta.isUseCache){
                this.shopsList = [];
                this.page =1;
                this.loadall =false;
                this.busy= false;
                this.loadMore();
                }
                this.$route.meta.isUseCache = false;
                this.loadMore()
        },
          beforeRouteEnter( to, from,next){
            // console.log('离开')
            // console.log(this.newding)
            //  clearTimeout(this.newding);
            // if (to.name == 'commodity_details') {
            //     to.meta.isUseCache = true;
            // }
            console.log('进入')
            next();
        },
        beforeRouteLeave( to, from,next){
            if (to.name == 'Commodity') {
                to.meta.isUseCache = true;    
            }        
            next();
        },
        watch:{
          search:function(newVal, ordVal){
             if(""==this.search){
               this.page=1;
               this.Clickonthe_goods=false,
               this.Clickonthe_shops=true,
               this.shopsList=[]
               this.Seach_type=2
               this.loadMore()
             }
          }
        }

    }
</script>